<!--  -->
<template>
  <div class="select">
    <div style="padding: 10px; padding-top: 0px">
      <el-input
        style="margin-bottom: 17px"
        placeholder="请输入搜索内容"
        v-model="filterText"
        size="mini"
        clearable
      >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <div class="select-items" ref="selectItems">
        <p
          class="select-item"
          :class="item.selected ? 'selected' : ''"
          v-for="(item, i) in myList"
          v-show="item.name && item.name.indexOf(filterText) > -1"
          :key="item._id"
          @click="select(item, i)"
        >
        <span class="left">
          {{ item.name }}
        </span>
        <span class="right"> <i class="V7_iconV7tubiao_gou V7_iconfont"></i></span>
        </p>
      </div>
    </div>

    <div class="straightLine"></div>
    <div class="operation">
      <el-button @click="cancel" style="height: 32px">取消</el-button>
      <el-button @click="search" type="primary"  style="height: 32px">确定</el-button>
    </div>
  </div>
</template>

<script lang='ts'>
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import { deepClone } from '@/utils/common'
@Component({ name: 'Select' })
export default class Select extends Vue {
  @Prop({ default: () => [] }) public list!: any
  @Prop({ default: '' }) public toValue!: any
  private select (item, i) {
    item.selected = !item.selected
    const list = this.list.filter(val => val.selected)
    this.$emit('select', item, i, list)
  }

  private search () {
    const value = this.toValue || '_id'
    const list = this.myList.filter(val => val.selected).map(q => q[value]);
    (this.$parent as any).dropdown.hide()
    this.$emit('search', list)
  }
  // 过滤值

  private filterText = ''
  private myList: any = []
  private mounted () {
    this.myList = deepClone(this.list)
  }

  @Watch('list')
  private getMylist () {
    this.myList = deepClone(this.list)
  }

  private cancel () {
    // console.log()
    (this.$parent as any).dropdown.hide()
  }
}
</script>
<style lang='stylus' scoped>
.select-items
  max-height 300px
  overflow auto
.select
  .select-item
    height 12px
    font-size 12px
    line-height 12px
    margin-bottom 22px
    font-family PingFang SC
    font-weight 400
    color #767E91
    cursor pointer
    &:last-child
      margin-bottom 1px
    &.selected
      color #008BEE
      .right
        display inline-block
    .left
      display inline-block
      width 100px
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    .right
      display none
      float right
.straightLine
  width 100%
  height 1px
  background #ECF0F3
  margin-bottom 10px
.operation
  text-align right
  padding-right 10px
</style>
